<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue</title>
</head>

<body>
  <div id="app">{{name}}</div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({ // watcher, 渲染watcher
      el: "#app",
      data() {
        return {
          name: "myVue",
          age: {
            n: 100
          },
          hobbies: "kdfj"
        }
      },
      watch: {//用户watcher
        name(newValue, value) {
          console.log(newValue, value);
        },
        "age.n"(newValue, value) {
          console.log(newValue, value);
        },
        hobbies: ["aa", "bb"]
      },
      methods: {
        aa(newVal, oldVal) {
          console.log("aa");
        },
        bb(newVal, oldVal) {
          console.log("bb");
        }
      }
    })
    new Promise((resolve) => {

      resolve(111)
    }).then(res => {
      setTimeout(() => {
        vm.name = "new Vue"
        vm.age = {
          n: 122
        };
        vm.hobbies = "kdjfkdjfkd"
      }, 1000);
      console.log(res);
    })
  </script>
</body>

</html>